<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="stylesheet" href="./css/mediatyle.css"> 
    <link rel="stylesheet" href="./css/rest.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body class="___index___">
    <div id="app" v-cloak>
        <div class="top-nav">
            <img class="left-logo" v-if="!isShowInp" src="./images/logo.png" alt="">
            <div class="searchIup" v-else>
                <form action="javascript:return true;">
                    <input type="search" v-model="searchVal" name="search" ref="searchInput"/>
                </form>
                <i class="close" @click="isShowInp = false"></i>
            </div>
            <div class="right-content">
                <img class="search-icon" @click="showInp()" src="./images/search.png" alt="">
                <img class="nav-icon" @click="iShowNav = !iShowNav" src="./images/navIcon.png" alt="">
            </div>
        </div>
        <div class="line"></div>
        <div class="search-title">
            搜索结果
        </div>
        <div class="search-nav">
            <img src="./images/iconTime.png" alt="">
            <span :class="timeIdx==index?'on':''" v-for="(item,index) of timeList" @click="checkTimeSearch(item,index)" :key="index">{{item.title}}</span>
            <!-- <span class="on">全部时间</span>
            <span>一周内</span>
            <span>一月内</span>
            <span>三月内</span>
            <span>一年内</span> -->
        </div>
        <div class="search-list">
            <div class="search-news-item" v-for="(item,index) of newsList" :key="index" @click="goDetails(item)">
                <div class="search-news-item-title">{{item.title}}</div>
                <div class="search-news-item-content" v-html="item.content"></div>
                <div class="search-news-item-time">
                    <span>作者：{{item.author}}</span>
                    <span>时间：{{item.createTime}}</span>
                </div>
            </div>
            <p v-if="maxpage>params.pageNum" class="loading" @click="loadMore()">点击加载更多</p>
            <p v-else class="loading">没有更多了</p>
        </div>
       
       
        <div class="footer-box">
            <div class="footer-bottom">
                <p>© 2024 数字经济公共服务平台 版权所有</p>
                <p><a href="https://beian.miit.gov.cn/">赣ICP备2024036929号</a></p>
                <!-- <p>技术支持：xx科技有限公司</p> -->
            </div>
        </div>
   
        <div class="popBox" v-if="iShowNav">
            <div class="pop-center">
                <img src="./images/cancel.png" @click="iShowNav=false" class="cancel" alt="">
                <p class="nav-item" @click="goIndexPage()">首页</p>
                <p v-for="(item,index) of navList" class="nav-item"  @click="goList(item)" :key="index">{{item.name}}</p>
            </div>
        </div>
    </div>
    <script src="./js/rem_count.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/config.js"></script>
    <script>
        new Vue({
                el: '#app',
                data() {
                    return {
                        baseUrl,
                        navList:[],
                        isShowInp:false,
                        iShowNav:false,
                        params:{
                            pageNum:1,
                            pageSize:5,
                            categoryId:null,
                            title:'',
                            timeRange:0
                        },
                        searchVal:'',
                        newsList:[],
                        timeIdx:0,
                        timeList:[
                            {time:0,id:0,title:'全部时间'},
                            {time:7,id:1,title:'一周内'},
                            {time:30,id:2,title:'一月内'},
                            {time:90,id:3,title:'三月内'},
                            {time:365,id:4,title:'一年内'},
                        ],
                        loading:true,
                        maxpage:null
                    }
                },
                mounted(){
                    this.$nextTick(() => {
                        const urlParams = new URLSearchParams(window.location.search);
                        this.params.title = urlParams.get('title');
                        this.getNavList()    
                        this.getChildsList()      
                    })
                },
                methods:{
                    getNavList(){
                        axios.post(this.baseUrl+'index/getCategory', {})
                        .then( (res)=> {
                            console.log(res)
                            this.navList = res.data.data
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    showInp(){
                        if(this.isShowInp){
                            this.params.searchVal = this.searchVal
                            this.getChildsList()
                        }else{
                            this.isShowInp = true
                        }
                    },
                    goList(item){
                        window.location.href = './list.html?title='+item.name+'&id='+item.id
                    },
                    getChildsList(){
                        axios.post(this.baseUrl+'index/queryArticleByCategoryId', this.params)
                        .then( (res)=> {
                            
                            this.newsList = this.newsList.concat(res.data.data.list)
                            this.maxpage = res.data.data.pages
                        })
                        .catch( (error)=> {
                            console.log(error);
                        });
                    },
                    checkTimeSearch(item,index){
                        console.log(item.time)
                        this.timeIdx = index
                        this.params.timeRange = item.time
                        this.getChildsList()
                    },
                    goDetails(item){
                        window.location.href = './details.html?id='+item.id
                    },
                    loadMore() {
                        this.params.pageNum +=1
                        this.getChildsList()
                        // 这里是加载更多的逻辑
                    },
                    goIndexPage(){
                        window.location.href = './index.html'
                    }
                }
        })
    </script> 
</body>

</html>